<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<link rel="stylesheet" href="./css/index.css"/>
<link rel="stylesheet" href="./css/banner.css"/>

<script src="../js/show.js"></script>

<!-- 必须先引入jquery的js -->
<script type="text/javascript" src="/js/jquery.min.js"></script>
<!-- 引入bootstrap的css -->
<link rel="stylesheet" href="/js/bootstrap/bootstrap3/css/bootstrap.css">
<link rel="stylesheet" href="/js/bootstrap/bootstrap3/css/bootstrap-theme.css">

<!-- 引入bootstrap的js -->
<script type="text/javascript" src="/js/bootstrap/bootstrap3/js/bootstrap.js"></script>


<!-- 引入treeview 树的css、js -->
<link rel="stylesheet" href="/js/bootstrap/bootstrap-treeview/bootstrap-treeview.min.css">
<script type="text/javascript" src="/js/bootstrap/bootstrap-treeview/bootstrap-treeview.min.js"></script>

<!-- 引入fileinput的css、js -->
<link rel="stylesheet" href="/js/bootstrap/bootstrap-fileinput/css/fileinput.css">
<script type="text/javascript" src="/js/bootstrap/bootstrap-fileinput/js/fileinput.js"></script>
<script type="text/javascript" src="/js/bootstrap/bootstrap-fileinput/js/locales/zh.js"></script>

<!-- 引入bootbox的js -->
<script type="text/javascript" src="/js/bootstrap/bootstrap-bootbox/bootbox.js"></script>

<!-- 引入addTabs 选项卡的css、js -->
<link rel="stylesheet" href="/js/bootstrap/bootStrap-addTabs/bootstrap.addtabs.css">
<script type="text/javascript" src="/js/bootstrap/bootStrap-addTabs/bootstrap.addtabs.min.js"></script>

<!-- 引入table css，js -->
<link rel="stylesheet" href="/js/bootstrap/bootstrap-table/bootstrap-table.css">
<script src="/js/bootstrap/bootstrap-table/bootstrap-table.js"></script>
<script src="/js/bootstrap/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>


<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <a class="navbar-brand" href="#">项目标题</a>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="../static/login.html">登录</a></li>
            <li><a href="#">注销</a></li>
        </ul>
    </div>
</nav>
<div class="container-fluid" style="margin-top: 70px">
    <div class="row">
        <div class="col-md-2">
            <!-- 树 -->
            <div id="mytree"></div>
        </div>
        <div class="col-md-10">
            <!-- 选项卡 -->
            <div id="myTabs">

                <div id="app" @click="showOps=false">
                    <div style="width: 70%;text-align: center;margin: auto;">
                        <div class="banner">
                            <div class="logo">
                                <img src="./img/zhang.png" alt="1"/>
                                <span>
          <div class="logo-ch">携人旅游</div>
          <div class="logo-en">www.xieren.com</div>
        </span>
                            </div>
                            <div >
                                <input type="checkbox" id="toggle-button" v-model="isTest">
                                <!--label中的for跟input的id绑定。作用是在点击label时选中input或者取消选中input-->
                                <label for="toggle-button" class="button-label">
                                    <span class="circle"></span>
                                    <span class="text on">测试</span>
                                    <span class="text off">正式</span>
                                </label>
                            </div>
                        </div>
                        <!--关键字搜索-->
                        <div class="search-bar">
                            <div class="input-box">
                                <input title="输入关键字搜索酒店" v-model="params.key" type="text" @click.stop="" @focus="showOps=true"
                                       @keyup="handleKeyUp($event)">
                                <button @click="handleSearch">搜索</button>
                            </div>
                            <div id="complete-box" v-show="showOps && ops.length > 0">
                                <div v-for="(item, i) in ops" :key="i" @click="handleSearch" @mouseover="opsIndex = i"
                                     :style='{"background-color": opsIndex===i ? "#EEE" : "#fff"}'>{{item}}
                                </div>
                            </div>
                        </div>
                        <!-- 已选择过滤项 -->
                        <div class="selected-ops">
                            <div class="open">全部结果：</div>
                            <div class="selected-op" v-for="(v, k) in params.filters" :key="k" @click="deleteFilter(k)">
                                {{filterNames[k]}}：<span>{{v}} <span class='close'>×</span></span>
                            </div>
                        </div>
                        <!--过滤项-->
                        <div class="filter-list">
                            <div v-for="(v, k) in remainFilter" :key="k">
                                <div class="filter-box">
                                    <div class="f-key"><strong>{{filterNames[k]}}</strong></div>
                                    <div class="column-divider"></div>
                                    <div class="f-items">
                                        <div class="f-item" @click="clickFilter(k, o)" v-for="(o, j) in v" :key="j"><a href="javascript:void(0)">
                                            {{o}}</a></div>
                                    </div>
                                </div>
                                <div class="row-divider"></div>
                            </div>
                            <div class="filter-box">
                                <div class="f-key"><strong>价格</strong></div>
                                <div class="column-divider"></div>
                                <div class="f-items">
                                    <div class="f-item" @click="clickFilter('price','0-100')"><a href="javascript:void(0)">100元以下</a></div>
                                    <div class="f-item" @click="clickFilter('price','100-300')"><a href="javascript:void(0)">100-300元</a></div>
                                    <div class="f-item" @click="clickFilter('price','300-600')"><a href="javascript:void(0)">300-600元</a></div>
                                    <div class="f-item" @click="clickFilter('price','600-1500')"><a href="javascript:void(0)">600-1500元</a></div>
                                    <div class="f-item" @click="clickFilter('price','1500-0')"><a href="javascript:void(0)">1500元以上</a></div>
                                </div>
                            </div>
                        </div>
                        <!-- 排序 -->
                        <div class="top-ban">
                            <!--排序条件-->
                            <div class="sort-items">
                                <div class="sort-item" v-for="(item, i) in sortItems" :key="i">
                                    <a :class="{selected: params.sortBy===item.key}" @click="params.sortBy=item.key"
                                       href="javascript:void(0)">{{item.text}}</a>
                                    |
                                </div>
                            </div>

                            <!--分页条-->
                            <div class="top-pagination">
                                <span>共 <i style="color: #222;">{{total}}</i> 家酒店</span>
                                <span><i style="color: red;">{{params.page}}</i>/{{totalPage}}</span>
                                <a class="btn-arrow" href="#" style="display: inline-block" @click="prePage">&lt;</a>
                                <a class="btn-arrow" href="#" style="display: inline-block" @click="nextPage">&gt;</a>
                            </div>
                        </div>
                        <div class="row-divider" style="margin-bottom: 5px; width: 100%"></div>
                        <!--酒店列表-->
                        <div style="display: flex; justify-content: space-between;">

                            <div class="hotel-list">
                                <div class="hotel-box" v-for="(hotel,i) in hotels" :key="i"
                                     style="display: flex;justify-content: space-between;" @mouseover="handleMarkerFocus(hotel)">
                                    <div class="ad-mark" v-if="hotel.isAD">
                                        <img src="./img/ad.png" width="25"/>
                                    </div>
                                    <div style="width: 0;"></div>
                                    <div style="width: 25%"><img width="100%" :src="hotel.pic"></div>
                                    <div class="hotel-info">
                                        <div class="hotel-name" v-html="hotel.name">
                                        </div>
                                        <div class="star-name"> {{hotel.starName}}</div>
                                        <div class="address">
                                            位于 <span style="color: #BC8516;">{{hotel.business}}</span> 周边，{{hotel.address}}
                                        </div>
                                        <div class="order"> 1分钟前有人预订了该酒店</div>
                                        <div v-if="hotel.distance" class="address">距离您 {{hotel.distance.toFixed(2)}} km</div>
                                    </div>
                                    <div style="text-align: left; width: 15%;">
                                        <div>
                                            <b style="color: #f60;">￥</b> <span id='hotel-price'>{{hotel.price}}</span> <span
                                                style="font-size: 0.2em; color: #999;">起</span>
                                        </div>
                                        <div class='btn'  @click="yuding(hotel.id)">
                                            立即预定
                                        </div>
                                        <div>
                                            <span class="hotel-score">{{hotel.score / 10}}分</span> /<span>5分</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div :class='{"map-box": true, "fixed-map": isFixed}' :style="{left: ml + 'px'}">
                                <div class="map-head">地图预览</div>
                                <div class="amap" id="container"></div>
                                <div class="map-geo" @click="getGeoLoc">
                                    <img src="https://a.amap.com/jsapi/static/image/plugin/waite.png" v-show="loading">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<script>

    //定义树里的数据来源
    function getTree(){
        var data = [{
            id:0,
            text: '携人旅行项目',
            href: '/ss.html',
            selectable:true,
            nodes:[
                {
                    id:1,
                    text: '酒店',
                    href: '/show.html',
                    selectable:true,
                },
                {
                    id:2,
                    text: '旅游',
                    href: '/show1.html',
                    selectable:true,
                },
                {
                    id:3,
                    text: '景点攻略',
                    href: '/show1.html',
                    selectable:true,
                }
            ]}
        ];
        return data;
    }
</script>
</body>
</html>